<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 300px;
				background-color: pink;
				margin: 360px 400px 0;
			}
			
			#dl{
				display: block;
				width: 300px;
				height: 300px;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				
				document.onkeydown = function(event){
					event = event || window.event;
					//alert(event.keyCode);
					
					var step = 10;
					switch(event.keyCode){
						case 37:
							//向左
							dl.style.left = dl.offsetLeft - step + "px";
							break;
						case 39:
							//向右
							dl.style.left =  dl.offsetLeft + step + "px";
							break;
						case 38:
							//向上
							dl.style.top =  dl.offsetTop - step + "px";
							break;
						case 40:
							//向下
							dl.style.top =  dl.offsetTop + step + "px";
							break;
					}
				};
			};
		</script>
	</head>
	<body>
		<img id="dl" src="img/dl.jpg"/>
		<div id="box1">
		</div>
	</body>
</html>
